<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.prime.com.tr/ui">

<ui:define name="head">
<script type="text/javascript">
			function handleDrop(event, ui) {
				ui.draggable.fadeOut(function() {$(this).fadeIn();});

				$(this).droppable('disable');
			}
</script>
</ui:define>

<h:head>
	<title></title>
	<meta name="keywords" content="" />
	<meta name="description" content="" />
	<link href="recursos/estilo.css" rel="stylesheet" type="text/css"
		media="screen" />
</h:head>

<h:body>
	<ui:composition template="template/common.xhtml">
		<ui:define name="content">
			<div class="post"><h:form id="form">

				<p:fieldset legend="#{msg.criarRodada}">
					<h:outputLabel for="campeonatos" value="#{msg.campeonato}" />
					<p:selectOneMenu id="campeonatos" value="#{rodadaMB.campeonato}"
						converter="campeonatoConverter">
						<f:selectItems value="#{campeonatoMB.campeonatosSI}" />
						<p:ajax actionlistener="#{rodadaMB.filtrarRodadas}" event="change"
							update="rodadas" />
					</p:selectOneMenu>

					<h:outputLabel for="rodadas" value="#{msg.rodada}" />
					<p:selectOneMenu id="rodadas" value="#{rodadaMB.rodada}">
						<f:selectItems value="#{rodadaMB.rodadas}" />
					</p:selectOneMenu>

					<p:spacer />

					<p:panel header="#{msg.criarPartida}">

						<h:panelGrid columns="2" id="grid"
							rendered="#{rodadaMB.rodada != null}">
							<p:panel header="#{msg.times}">
								<p:dataGrid id="times" value="#{rodadaMB.times}" var="time">
									<p:column>
										<p:outputPanel id="time">
											<p:graphicImage value="#{timeMB.path}#{time.imagem}"
												width="30" height="30" />
											<h:outputText value="#{time.nome}" style="font-size:10px" />
										</p:outputPanel>
										<p:draggable for="time" revert="true" />
										<p:droppable datasource="times"
											dropListener="#{rodadaMB.onDropBack}" for="time">
										</p:droppable>
									</p:column>
								</p:dataGrid>
							</p:panel>

							<p:panel header="#{msg.partida}">

								<h:panelGrid columns="3" style="margin-left:120px;">
									<p:outputPanel id="timeCasa" styleClass="slot">
										<p:droppable datasource="times" for="timeCasa"
											dropListener="#{rodadaMB.onDrop}" tolerance="fit">
										</p:droppable>
										<p:spacer height="20" />
									</p:outputPanel>
									<h:outputText value=" X " />
									<p:outputPanel id="timeVisitante" styleClass="slot">
										<p:droppable datasource="times" for="timeVisitante"
											onDrop="handleDrop" tolerance="fit">
											<p:ajax listener="#{rodadaMB.onDrop}" />
										</p:droppable>
										<p:spacer height="20" />
									</p:outputPanel>
								</h:panelGrid>
							</p:panel>

						</h:panelGrid>

						<p:commandButton value="Limpar" type="reset" />
						<p:commandButton value="Adicionar" update="books msgs @parent"
							action="#{rodadaMB.criarRodada}">
							<p:collector value="#{rodadaMB.partida}"
								addTo="#{rodadaMB.partidas}" />
						</p:commandButton>

					</p:panel>
				</p:fieldset>
			</h:form></div>

		</ui:define>


	</ui:composition>
</h:body>
</html>